<template>
	<view class="logistics">
		<view class="query">
			<view class="query-input">
				<image src="../../static/serach.png"></image>
				<picker mode="date" :value="queryParams.createtime" @change="extraChange" fields="month">
					<input type="text" placeholder="请选择时间" v-model="queryParams.createtime" disabled
						placeholder-style="font-size: 28rpx;color: #969699;" />
				</picker>
				<image src="../../static/del.png" mode="" v-if="queryParams.createtime" @click="extraDel" class="del">
				</image>
			</view>
		</view>
		<view class="content">
			<view v-for="(item, index) in dataList" :key="index" class="content-item"
				@click="toOrder(item.warranty.id)">
				<view class="row">
					<view class="row-label">类型</view>
					<view class="row-value">{{ item.type_data == 0 ? '工程师提成':'销售提成'}}</view>
				</view>
				<view class="tag" :class="{
            send: item.grant_data == 1,
            receive: item.grant_data == 0,
          }">{{ item.grant_data == 1 ? '已发放':'未发放'}}</view>
				<view class="row">
					<view class="row-label">业绩</view>
					<view class="row-value">{{ item.achievement || 0 }}</view>
				</view>
				<view class="row">
					<view class="row-label">提成金额</view>
					<view class="row-value">{{ item.commission || 0 }}</view>
				</view>
				<view class="row">
					<view class="row-label">关联工单号</view>
					<view class="row-value">{{ item.warranty.workID || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">额外奖励</view>
					<view class="row-value">{{ item.other_commission || 0 }}</view>
				</view>
				<view class="row">
					<view class="row-label">创建时间</view>
					<view class="row-value">{{ item.createtime || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">备注</view>
					<view class="row-value">{{ item.remarks || "-" }}</view>
				</view>
				<!-- <view class="row">
					<view class="row-label">物流图片</view>
					<view class="row-value">
						<image v-for="(img, k) in item.express_images" :key="k" :src="img"
							@click="preview(k, item.express_images)" />
					</view>
				</view> -->
			</view>
		</view>
		<empty v-if="dataList.length == 0" />
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import xflSelect from "@/components/xfl-select/xfl-select.vue";
	export default {
		components: {
			empty,
			xflSelect,
		},
		data() {
			return {
				dataList: [],
				last_page: 1,
				queryParams: {
					createtime: '',
					page: 1,
				},
			};
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			this.getList();
		},
		methods: {
			// 切换日期
			extraChange(e) {
				this.queryParams.createtime = e.detail.value;
				if (!this.queryParams.createtime) return
				this.init()
				this.getList();
			},
			// 关联工单
			toOrder(id) {
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				})
			},
			// 重置
			extraDel() {
				this.queryParams.createtime = ''
				this.init()
				this.getList();
			},
			init(){
				this.queryParams.page = 1;
				this.dataList = []
			},
			// 获取数据列表
			getList() {
				this.$https.post("/warranty/commissionList", this.queryParams).then((res) => {
					this.last_page = res.data.last_page;
					let list = res.data.data;
					list.forEach((i) => {
						if (i.express_images) {
							i.express_images = i.express_images.split(",");
						} else {
							i.express_images = [];
						}
					});
					this.dataList = this.queryParams.page == 1 ? list : this.dataList.concat(list);
				});
			},
		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page = this.queryParams.page + 1;
				this.getList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.logistics {
		background-color: #f7f8fb;
		min-height: 100vh;

		.query {
			display: flex;
			align-items: center;
			height: 70rpx;
			justify-content: space-between;
			color: #000;
			position: sticky;
			top: 0;
			z-index: 9;
			width: 92%;
			background-color: #f7f8fb;
			padding: 36rpx 30rpx;
			font-size: 26rpx;

			picker {
				width: 86%;
			}

			&-input {
				display: flex;
				align-items: center;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				display: flex;
				padding: 26rpx 32rpx 26rpx 24rpx;
				display: flex;
				align-items: center;
				width: 100%;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 34rpx;
				}

				.del {
					margin-right: 0;
				}
			}
		}

		.content {
			margin: 24rpx;
			margin-top: 0rpx;

			&-item {
				box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.05);
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;

				.tag {
					position: absolute;
					right: 0;
					top: 0;
					padding: 10rpx 30rpx;
					font-size: 26rpx;
					color: #fff;
					background-color: #82dcec;
					border-radius: 0 20rpx 0 20rpx;
				}

				.row {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					line-height: 46rpx;

					&-label {
						color: #969699;
						width: 160rpx;
					}

					&-value {
						color: #303030;
						flex: 1;
						word-break: break-all;

						image {
							width: 120rpx;
							height: 120rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
						}
					}
				}

				.send {
					background-color: #82dcec;
				}

				.receive {
					background-color: #f8c168;
				}
			}
		}
	}
</style>